<template>
    <div class="top">
        <h3><span>丨</span>采收计划详情</h3>
        <div style="text-align:right;margin-top:20px;">
            <el-button @click="backHandler" class="back">返回</el-button>
        </div>
    </div>
    <el-table :data="[formData2]" style="width: 100%">
        <el-table-column prop="id" label="序号" />
        <el-table-column prop="pc" label="地块名称" />
        <el-table-column prop="pd" label="地块作物" />
        <el-table-column prop="realname" label="采收人" />

    </el-table>
    <h3><span>丨</span>本次采收量</h3>
    <el-table :data="[formData2]" style="width:100px">
        <el-table-column prop="pe" label="采收量" />
    </el-table>
    <!-- <el-form>
        <el-form-item label="序号" :label-width="120" prop="id">
            <el-input v-model="formData2.id" />
        </el-form-item>
        <el-form-item label="地块名称" :label-width="120" prop="pc">
            <el-input v-model="formData2.pc" />
        </el-form-item>
        <el-form-item label="地块作物" :label-width="120" prop="pd">
            <el-input v-model="formData2.pd" />
        </el-form-item>
        <el-form-item label="采收人" :label-width="120" prop="realname">
            <el-input v-model="formData2.realname" />
        </el-form-item>
        <el-form-item label="采收量" :label-width="120" prop="pe">
            <el-input v-model="formData2.pe" />
        </el-form-item>
    </el-form> -->
</template>

<script lang='ts' setup>
import type { IUserTableItem0 } from '@/interfaces/IUser';
import { id } from 'element-plus/es/locales.mjs';
import { reactive } from 'vue';
import { watch } from 'vue';
import { inject } from 'vue';
import router from '@/router';
import { useNewOrdersStore } from '@/stores/NewOrdersStore';
const newOrdersStore = useNewOrdersStore();
const props = defineProps<{ checkRow: IUserTableItem0 | null }>()
const originFormData2: any = {
    id: '',
    pa: '',
    pb: '',
    pc: '',
    realname: '',
    pe: '',

}
const formData2 = reactive({ ...newOrdersStore.orderPlans[0] })
watch(() => props.checkRow, (val) => {
    if (val) {
        Object.assign(formData2, val)
    }
}, { immediate: true })


const currentView = inject('currentView');
const backHandler = () => {
    if (currentView && typeof currentView === 'object' && 'value' in currentView) {
        // currentView.value = 'planlist';
         newOrdersStore.xs = true;
         router.push('/orders');
    }
}
</script>

<style lang='scss' scoped>
h3 {
    width: 200px;
    margin: 30px 0;
    color: white;
}

span {
    color: #52e1dc;
}

.top {
     width: 100%;
    display: flex;
    justify-content: space-between;

    .back {
        background-color: rgb(84, 84, 129);
        color: white;
        width: 85px;
        height: 40px;
    }
}
::v-deep(.el-table__body .el-table__row .el-table__cell) {
  background-color: #0F2634!important;
  border: 0;
  color: white;
    border-bottom: none !important;
}
::v-deep(.el-table__header .el-table__cell) {
  background-color: #1D4A56 !important;
  border: 0;
  color: white;
  border-bottom: none !important;
}
::v-deep(div.el-table__inner-wrapper::before) {
  display: none !important;
  border: none !important;
  height: 0 !important;
  background: none !important;
}
.el-button{
    background-color: #1E4D58 !important;
    color: #4BC6C7;
    border: 0;
}
</style>